<template>
  <div class="rank-container">
    <van-sticky>
      <van-nav-bar class="nav-back" left-text="返回" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
      <div class="rank-header">
        <img
          width="100%"
          height="160"
          src="../../static/zhuangyuan.png"/>
      </div>
    </van-sticky>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in rankList" :key="index">
          <div class="item-row row-center">
            <div class="item-row-left row-center">
              <van-tag class="rank-num" size="large" type="warning">{{
                item.rankNum
              }}</van-tag>
              <van-image width="60" height="40" class="rank-img" :src="item.imageUrl" />
            </div>
            <div flo class="item-row-right">
              <van-tag type="warning" size="large">{{ item.userName }}</van-tag>
              <van-tag type="primary" size="large" class="lab-integral label-font">{{
                item.integral
              }}</van-tag>
            </div>
          </div>
          <div class="item-footer"></div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script src='./ranking.js'>
</script>

<style lang="scss" scoped>
@import "./ranking.scss";
</style>>